<template>
  <div class="request-party-service-manage">
    <div class="app-container">
      <div class="mainbox">
        <Header :header-name="$route.meta.title" />

        <div class="request-party-service-manage-body">

          <!-- 搜索板块 -->
          <el-form ref="form" :model="form" inline label-width="80px" class="search-form">
            <el-form-item prop="systemId">
              <el-select v-model="form.systemId" clearable placeholder="请选择系统名称">
                <el-option
                  v-for="(item, index) in systemIdList"
                  :key="index"
                  :label="item.systemCode + ' / ' + item.systemName"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item prop="ip">
              <el-input v-model="form.ip" placeholder="请输入ip地址" />
            </el-form-item>
            <el-form-item prop="createUserName">
              <el-input v-model="form.createUserName" placeholder="请输入创建人" />
            </el-form-item>
            <el-form-item prop="type">
              <el-select v-model="form.type" placeholder="请选择黑白名单">
                <el-option value="2" label="黑名单" />
                <el-option value="1" label="白名单" />
              </el-select>
            </el-form-item>

            <el-form-item class="query-action">
              <el-button type="primary" @click="getTableData"> 查询 </el-button>
              <el-button :loading="loading" @click="resetBtn"> 重置 </el-button>
              <el-button type="primary" @click="addBtn"> 新增 </el-button>
              <el-button :disabled="ids.length === 0" type="danger" @click="batchInfoDel"> 删除 </el-button>
            </el-form-item>
          </el-form>

          <!-- 表格数据视图 -->
          <div>
            <FlexTable
              v-loading="loading"
              border
              :data="tableData"
              :columns="columnsOptions"
              @selection-change="handleSelectionChange"
            />

            <el-pagination
              :page-size="pagination.pageSize"
              :current-page.sync="pagination.pageNo"
              layout="prev, pager, next, jumper"
              :total="pagination.totalPage"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
        <add-list ref="addListRef" :system-id-list="systemIdList" @getTableData="getTableData" />
      </div>
    </div>
  </div>
</template>

<script>
import AddList from '@/views/blackAndWhiteLists/components/addList.vue'
import { getList, singleInfoDel, batchInfoDel } from '@/api/blackAndWhiteLists'
import { getSystemListApi } from '@/api/serviceManage/requestPartyServiceManage'
import _ from 'lodash'

export default {
  name: 'BlackAndWhiteLists',
  components: {
    AddList
  },
  data () {
    return {
      ids: [],
      form: {
        systemId: '',
        ip: null,
        createUserName: null,
        type: null
      },
      loading: false,
      tableData: [],
      columnsOptions: [
        { type: 'selection' },
        { label: '系统名称', prop: 'systemName' },
        { label: 'ip地址', prop: 'ip' },
        { label: '类型', prop: 'type', customRender: (scope) => {
          let span
          if (scope.row.type === '1') {
            span = <span>白名单</span>
          } else if (scope.row.type === '2') {
            span = <span type='success'>黑名单</span>
          }
          return span
        } },
        { label: '创建时间', prop: 'createTime' },
        { label: '创建人', prop: 'createUserName' },
        { label: '备注', prop: 'remark' },
        { label: '操作', width: 200,
          customRender: (scope) => {
            return [
              <el-button type='text' onClick={() => this.detailBtn(scope.row)}> 详情 </el-button>,
              <el-button type='text' onClick={() => this.upDataBtn(scope.row)}> 修改 </el-button>,
              <el-button type='text' class='text-del-btn' onClick={() => this.singleInfoDel(scope.row)}> 删除 </el-button>
            ]
          }
        }
      ],
      pagination: {
        pageNo: 1,
        pageSize: 10,
        totalPage: 0
      },
      systemIdList: []
    }
  },
  mounted() {
    this.getTableData()

    getSystemListApi()
      .then(({ code, data }) => {
        if (code === '00000') {
          this.systemIdList = data
        }
      })
  },
  methods: {
    confirmDelete(operation, payload) {
      this.$confirm('此操作将永久删除数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await operation(payload) // operation 接受函数形式
        if (res.code === '00000') {
          this.$message.success('删除成功')
          await this.getTableData()
        }
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },

    // 替换原有的批量删除和单个删除方法
    batchInfoDel() {
      this.confirmDelete(batchInfoDel, { ids: this.ids })
    },
    singleInfoDel(row) {
      this.confirmDelete(singleInfoDel, { id: row.id })
    },

    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.getTableData()
    },
    handleCurrentChange(val) {
      this.pagination.pageNo = val
      this.getTableData()
    },
    // 获取表格数据
    async getTableData() {
      this.loading = true
      try {
        const { code, data } = await getList({
          pageNo: this.pagination.pageNo,
          pageSize: this.pagination.pageSize,
          ...this.form
        })
        if (code === '00000') {
          this.tableData = data.rows
          this.pagination.totalPage = data.totalRows
        }
      } finally {
        this.loading = false
      }
    },
    // 重置按钮
    resetBtn() {
      Object.assign(this.form, {
        type: null,
        createUserName: null,
        ip: null,
        systemId: null
      })
      this.getTableData()
    },
    addBtn() {
      this.$refs.addListRef.dialogVisible = true
    },
    upDataBtn(val) {
      this.$refs.addListRef.form = _.cloneDeep(val)
      this.$refs.addListRef.dialogVisible = true
    },
    detailBtn(val) {
      this.$refs.addListRef.form = val
      this.$refs.addListRef.disabled = true
      this.$refs.addListRef.dialogVisible = true
    },
    //   表格选中的数据
    handleSelectionChange(val) {
      this.ids = val.map(item => item.id)
    }
  }
}
</script>

<style lang="scss" scoped>
.request-party-service-manage {
  background: #F2F2F2;

  &-body {
    background: #fff;
    margin-top: 10px;
    padding: 20px;
    height: calc(100vh - 254px);
    overflow-y: auto;
  }
  .el-pagination {
    text-align: right;
    margin-top: 20px;
  }

  .el-tree {
    ::v-deep .el-tree-node__expand-icon {
      font-size: 18px;
    }
    .custom-tree-node {
      width: calc(100% - 30px);
      display: flex;
      align-items: center;
      padding-right: 20px;

      > span:first-child {
        display: inline-block;
        width: calc(100% - 50px);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        line-height: 40px;
      }

      .tree-btn {
        .el-switch {
          margin-top: -4px;
          margin-left: 10px;
        }
      }
    }
  }
}
</style>
